<template>
  <div style="position: relative; height: 100%">
    <!-- <a-spin
      v-if="loading"
      :spinning="loading"
      style="
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        background: rgba(255, 255, 255, 0.5);
      "
    /> -->
    <a-table :dataSource="dataSource" :columns="columns" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import csv from 'csvtojson'
import { message as Message } from 'ant-design-vue'

let props = defineProps({
  content: {
    required: true,
  },
})

let columns = ref([])
let dataSource = ref([])
watch(
  () => props.content,
  c => {
    if (c) {
      csv({
        // output: 'csv',
      })
        .fromString(c)
        .then(function (result) {
          dataSource.value = result.map((row, index) => {
            return { key: index, ...row }
          })
          if (result.length) {
            columns.value = Object.keys(result[0]).map(key => {
              return {
                title: key,
                dataIndex: key,
                key: key,
              }
            })
          }
        })
        .catch(e => {
          Message.error('渲染失败!')
        })
    }
  },
  { immediate: true },
)

// let loading = ref(false)

// onMounted(() => {
//   loading.value = true
//   axios.get(props.path, { responseType: 'blob' }).then(response => {
//     let reader = new FileReader()
//     // 读取文件中的内容，执行读文件函数，设置编码格式。
//     reader.readAsText(response.data, 'UTF-8')
//     // 读取文件，得到文件内容。
//     reader.onload = function (e) {
//       let content = e.target.result
//       html.value = hljs.highlightAuto(content).value
//       loading.value = false
//     }
//   })
// })
</script>
